<template>
  <div class="admin-dashboard-view">
    <div class="page-header">
      <h2><i class="el-icon-house"></i> 管理员首页</h2>
    </div>
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-icon" style="background: #409EFF;">
              <i class="el-icon-office-building"></i>
            </div>
            <div class="stats-info">
              <div class="stats-number">{{ stats.departments }}</div>
              <div class="stats-label">系部数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-icon" style="background: #67C23A;">
              <i class="el-icon-user-solid"></i>
            </div>
            <div class="stats-info">
              <div class="stats-number">{{ stats.students }}</div>
              <div class="stats-label">学生总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-icon" style="background: #E6A23C;">
              <i class="el-icon-s-custom"></i>
            </div>
            <div class="stats-info">
              <div class="stats-number">{{ stats.teachers }}</div>
              <div class="stats-label">教师总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-icon" style="background: #F56C6C;">
              <i class="el-icon-notebook-2"></i>
            </div>
            <div class="stats-info">
              <div class="stats-number">{{ stats.courses }}</div>
              <div class="stats-label">课程总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 快捷操作 -->
    <el-card class="quick-actions" style="margin-top: 20px;">
      <div slot="header">
        <span>快捷操作</span>
      </div>
      <template v-if="filteredActions.length">
        <el-row :gutter="20">
          <el-col :span="4" v-for="action in filteredActions" :key="action.path">
            <div class="action-item" @click="handleQuickAction(action.path)">
              <i :class="action.icon"></i>
              <div>{{ action.name }}</div>
            </div>
          </el-col>
        </el-row>
      </template>
      <div v-else class="no-actions">当前账号未被授予任何后台权限，请联系超级管理员。</div>
    </el-card>
    <!-- 最近活动 -->
    <el-card style="margin-top: 20px;">
      <div slot="header">
        <span>系统概览</span>
      </div>
      <div class="welcome-content">
        <h3>欢迎使用课程管理系统</h3>
        <p>当前时间：{{ currentTime }}</p>
        <p>您可以通过左侧菜单管理系统的各个模块，包括系部、专业、班级、学生、教师、课程和选课等功能。</p>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  name: 'AdminDashboard',
  data() {
    return {
      currentTime: '',
      stats: { departments: 8, students: 1256, teachers: 89, courses: 156 },
      // 定义后台功能与权限的映射
      quickActions: [
        { name: '系管理', icon: 'el-icon-office-building', path: '/department', permission: 'dept' },
        { name: '专业管理', icon: 'el-icon-collection', path: '/major', permission: 'major' },
        { name: '班级管理', icon: 'el-icon-user', path: '/class', permission: 'class' },
        { name: '学生管理', icon: 'el-icon-user-solid', path: '/student', permission: 'student' },
        { name: '教师管理', icon: 'el-icon-s-custom', path: '/teacher', permission: 'teacher' },
        { name: '课程管理', icon: 'el-icon-notebook-2', path: '/course', permission: 'course' }
      ]
    }
  },
  computed: {
    filteredActions() {
      const perms = this.$store.state.user.permissions || []
      // 超级管理员（有 admin 权限位或用户名 admin）直接返回所有 quickActions
      const isSuperAdmin = this.$store.getters['user/isSuperAdmin']
      if (isSuperAdmin) return this.quickActions
      return this.quickActions.filter(a => perms.includes(a.permission))
    }
  },
  mounted() {
    this.updateTime()
    setInterval(this.updateTime, 1000)
    this.loadStats()
  },
  methods: {
    updateTime() {
      this.currentTime = new Date().toLocaleString()
    },
    async loadStats() {
      try {
        // 暂时使用模拟数据，等待后端提供统计接口
        console.log('加载统计数据')
      } catch (error) {
        console.error('加载统计数据失败:', error)
        // 使用默认数据，不显示错误消息
      }
    },
    handleQuickAction(path) { this.$router.push(path) }
  }
}
</script>
<style scoped>
.admin-dashboard-view {
  padding: 24px;
  min-height: calc(100vh - 60px);
  background: #f5f6fa;
}
.page-header {
  margin-bottom: 24px;
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border: 1px solid #e8e9ea;
}
.page-header h2 {
  margin: 0;
  color: #303133;
  font-size: 28px;
  font-weight: 700;
  display: flex;
  align-items: center;
}
.page-header h2 i {
  margin-right: 12px;
  color: #409eff;
  font-size: 32px;
}
.stats-row {
  margin-bottom: 20px;
}
.stats-card {
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border: 1px solid #e8e9ea;
}
.stats-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.stats-content {
  display: flex;
  align-items: center;
}
.stats-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}
.stats-icon i {
  font-size: 28px;
  color: white;
}
.stats-number {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
}
.stats-label {
  font-size: 15px;
  color: #909399;
  margin-top: 5px;
}
.quick-actions {
  margin-top: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border: 1px solid #e8e9ea;
}
.action-item {
  text-align: center;
  padding: 20px;
  border: 1px solid #EBEEF5;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
  background: #f5f7fa;
  margin-bottom: 12px;
}
.action-item:hover {
  background: #e6f7ff;
  border-color: #409EFF;
}
.action-item i {
  font-size: 32px;
  color: #409EFF;
  margin-bottom: 10px;
  display: block;
}
.welcome-content {
  padding: 16px 0;
}
.welcome-content h3 {
  color: #303133;
  margin-bottom: 15px;
  font-size: 22px;
  font-weight: 600;
}
.welcome-content p {
  color: #606266;
  line-height: 1.6;
  margin-bottom: 10px;
  font-size: 15px;
}
.no-actions { padding: 12px 4px; color:#909399; font-size:14px; }
@media (max-width: 900px) {
  .stats-row .el-col {
    min-width: 100%;
    margin-bottom: 16px;
  }
  .admin-dashboard-view {
    padding: 8px;
  }
}
</style>
